<template>
  <div class="login">
    <NavBar :title="'登录'"></NavBar>
    <div class="logo">
      <img class="logo-icon" src="../assets/logo_icon.png" alt>
    </div>
    <div class="login-form">
      <div class="form-item">
        <img class="left-icon" src="../assets/phone_icon.png" alt="phone">
        <input
          class="item-input"
          placeholder="手机号码"
          type="number"
          v-model="loginName"
          @blur="setLoginInptStatus"
          @focus="setLoginInptStatus"
        >
        <img
          class="clear-icon"
          src="../assets/clear_icon.png"
          alt="clear"
          :style="{visibility: loginName.length>0&&loginNameStatus?'':'hidden'}"
          @mousedown="clearInpt('loginName')"
        >
        <img
          v-if="loginInfoList.length>0"
          class="arrow-icon"
          src="../assets/down_arrow_icon.png"
          alt="arrow"
          @click="dealHistoryListStatus"
        >
        <transition>
          <div class="login-info-history" v-if="historyStatus">
            <div class="info-lists">
              <div class="info-item" v-for="(item, index) in loginInfoList" :key="index" @click="chooseLoginInfo(index)">{{item.loginName}}</div>
            </div>
          </div>
        </transition>
      </div>
      <div class="form-item">
        <img class="left-icon" src="../assets/password_icon.png" alt="phone">
        <input
          class="item-input"
          placeholder="请输入密码"
          v-bind="{type: !eyeOpen ? 'password' : 'text'}"
          v-model="password"
          @blur="setPasswordInptStatus"
          @focus="setPasswordInptStatus"
        >
        <img
          class="clear-icon"
          src="../assets/clear_icon.png"
          alt="clear"
          :style="{visibility: password.length>0&&passwordStatus?'':'hidden'}"
          @mousedown="clearInpt('password')"
        >
        <img
          v-if="!eyeOpen"
          class="eye-icon"
          src="../assets/eye_icon.png"
          alt="eye"
          @click="changePassType"
        >
        <img
          v-else
          class="eye-icon eye-open"
          src="../assets/eye_open_icon.png"
          alt="eye"
          @click="changePassType"
        >
      </div>
      <div class="login-btn" v-if="loginName.length>0&&password.length>0" @click="login">登录</div>
      <div class="login-btn login-btn-disabled" v-else>登录</div>
      <div class="forget-password">忘记密码</div>
      <router-link to="/register" class="register" tag="div">
        <span>立即注册</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import axios from "axios";
import qs from "qs";
import Vue from "vue";
import { Toast } from "vant";
import { setTimeout } from 'timers';
Vue.use(Toast);
export default {
  name: "login",
  components: {
    NavBar
  },
  data() {
    return {
      loginName: "18349179063",
      password: "yuanbo123",
      loginNameStatus: false,
      passwordStatus: false,
      eyeOpen: false,
      historyStatus: false,
      loginInfoList: []
    };
  },
  methods: {
    setLoginInptStatus() {
      this.loginNameStatus = !this.loginNameStatus;
    },
    setPasswordInptStatus() {
      this.passwordStatus = !this.passwordStatus;
    },
    clearInpt(val) {
      this[val] = "";
    },
    changePassType() {
      this.eyeOpen = !this.eyeOpen;
    },
    //登录
    login() {
      Toast.allowMultiple()
      let telReg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
      if (!telReg.test(this.loginName)) {
        Toast("手机号有误");
      } else if (this.password.length < 6) {
        Toast("密码有误");
      } else {
        let loading = Toast.loading({
          mask: true,
          message: "加载中...",
          duration: 20000
        });
        this.axios
          .post(
            "/user/login",
            qs.stringify({
              loginName: this.loginName,
              password: this.password
            })
          )
          .then(res => {
            loading.clear()
            if(res.data.status.statusCode === 0) {
                Toast('登陆成功')
                this.setLoginInfoList()
                this.$store.commit('setToken', res.data.result.token)
                this.$store.commit('setUserInfo', res.data.result)
                setTimeout(()=>{
                        this.$router.replace(this.$route.query.redirect||'/');
                }, 2000)
            }
          })
          .catch( err => {
              loading.clear()
          })
        }
    },
    chooseLoginInfo(idx) {
        this.loginName = this.loginInfoList[idx].loginName
        this.password = this.loginInfoList[idx].password
        this.dealHistoryListStatus()
    },
    dealHistoryListStatus() {
        this.historyStatus = !this.historyStatus;
    },
    getLoginInfoList() {
        let loginInfoList;
        if(localStorage.getItem('loginInfoList')) {
            loginInfoList = JSON.parse(localStorage.getItem('loginInfoList'))
        }else {
            loginInfoList = []
        }
        this.loginInfoList = loginInfoList
    },
    setLoginInfoList() {
        let loginInfoList = this.loginInfoList;
        for( let i = 0; i < loginInfoList.length; i ++) {
            if(loginInfoList[i].loginName === this.loginName) {
                loginInfoList.splice(i, 1);
                break;
            }
        }
        loginInfoList.unshift({
            loginName: this.loginName,
            password: this.password
        })

        if(loginInfoList.length > 10) {
            loginInfoList.splice(10, loginInfoList.length - 10)
        }

        this.loginInfoList = loginInfoList;
        localStorage.setItem('loginInfoList', JSON.stringify(loginInfoList));
    }
  },
  created() {
    this.getLoginInfoList();
  }
};
</script>
<style scoped lang="scss">
.logo {
  padding: 0.85rem 0 0.9rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .logo-icon {
    width: 0.7rem;
    height: 0.35rem;
  }
}
.login-form {
  padding: 0 0.32rem 0 0.33rem;
  .form-item {
    font-size: 0.16rem;
    color: #333;
    display: flex;
    align-items: center;
    height: 0.42rem;
    position: relative;
    margin-top: 0.08rem;
    padding-right: 0.14rem;
    .left-icon {
      width: 0.16rem;
      height: 0.16rem;
    }
    .item-input {
      outline: none;
      border: none;
      flex: 1;
      padding-left: 0.15rem;
    }
    .clear-icon {
      width: 0.14rem;
      height: 0.14rem;
      padding: 0.14rem;
      margin-right: 0.26rem;
    }
    .arrow-icon {
      width: 0.16rem;
      height: 0.14rem;
    }
    .eye-icon {
      width: 0.14rem;
      height: 0.06rem;
    }
    .eye-open {
      height: 0.14rem;
    }
    .login-info-history {
      position: absolute;
      top: 0.42rem;
      left: 0;
      width: 100%;
      max-height: 1.52rem;
      padding: 0 0 0 0.29rem;
      box-sizing: border-box;
      overflow: auto;
      background: #fff;
      z-index: 9;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
      .info-lists {
        display: flex;
        flex-direction: column;
        font-size: 0.16rem;
        color: #333;
        align-items: flex-start;
        padding: 0.09rem 0;
        .info-item {
          padding: 0.09rem 0;
          width: 100%;
          text-align: left;
        }
      }
    }
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #ccc;
      transform: scale(1, 0.5);
    }
  }
  .login-btn {
    height: 0.44rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.04rem;
    font-size: 0.18rem;
    color: #fff;
    background: #dd3333;
    margin-top: 0.29rem;
  }
  .login-btn-disabled {
    opacity: 0.5;
  }
  .forget-password {
    padding: 0.15rem 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.13rem;
    color: #999;
  }
  .register {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 0.79rem;
    left: 0;
    span {
      position: relative;
      font-size: 0.13rem;
      color: #dd3333;
      &::after {
        position: absolute;
        content: "";
        right: -0.15rem;
        width: 0.05rem;
        height: 0.1rem;
        background-image: url("../assets/right_arrow_icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>